<template>
  <h1>个人信息</h1>
  <div class="reg">
    <el-form :model="userinfo_rsp" >
      <el-form-item label="用户名">
        <el-input v-model="userinfo_rsp.username"/>
      </el-form-item>
      <el-form-item label="头像">
        <el-input v-model="userinfo_rsp.image"/>
      </el-form-item>
      <el-form-item label="简介">
        <el-input v-model="userinfo_rsp.bio"/>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="userinfo_rsp.email"/>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="UserInfo.password" type="password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="modify">修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script setup lang="ts">
import { ref } from 'vue';
import axios from "@/utils/request"
import {User_Info,User} from '@/types'
import {set} from '@/utils/storage'
import router from '@/router'

import {useUserStore} from '@/store/user'
// import { userInfo } from 'os';
const userStore = useUserStore()
const { setUser } = userStore

const UserInfo = ref<User>({
  "username": "",
  "email": "",
  "password": ""
})

const userinfo_rsp = ref<User_Info>(  {
  "id": 0,
  "email": "LIG.KJMHNGBF",
  "username": "",
  "bio": 'etgdxhfkkguctli',
  "image": "ykxfcvfyll",
  "token": ""
})

const modify = function () {
  axios.put('/update/user',{
  "user":userinfo_rsp.value
}).then(res=>{
  userinfo_rsp.value = res.data.user
  setUser(userinfo_rsp.value)
  set('user_token', userinfo_rsp.value.token)
  console.log(res.data)
})
}
</script>

<style scoped>
.reg {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  /* border: 1px,blueviolet,solid; */
  padding-top: 0;
  width: 80%;
}
h1{
text-align: center;
font-size: 15px;
margin-top: 6%;
margin-bottom: 0;
}
.el-form-item{
  width: 900px;
}
.el-button{
  width: 900px;
}
</style>